<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:body>
	<h:head>
		<h:outputStylesheet>
			.even-row {
				background-color: #FCFFFE;
			}
			.odd-row {
				background-color: #ECF3FE;
			}
			.active-row {
				background-color: #FFEBDA !important;
				cursor: pointer;
			}
		</h:outputStylesheet>
	</h:head>
	<h:form>
		<rich:dataTable value="#{itemManagedBean.itens}" var="item" id="itens" rows="5" width="790px" rowClasses="odd-row, even-row" styleClass="stable">
			<rich:column>
				<f:facet name="header">
					<h:outputText value="Nome" />
				</f:facet>
				<h:outputText value="#{item.nome}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">
					<h:outputText value="Preço" />
				</f:facet>
				<h:outputText value="#{item.preco}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">
					<h:outputText value="Categoria" />
				</f:facet>
				<h:outputText value="#{item.categoria.descricao}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">				
					<h:outputLabel value="Ação" />
				</f:facet>
				<h:commandLink value="Excluir" actionListener="#{itemManagedBean.excluir}" >
					<f:attribute name="item" value="#{item}"/>
				</h:commandLink>
				<h:commandLink value="   Editar" action="alteraItem" >
					<f:attribute name="item" value="#{item}"/>
					<f:setPropertyActionListener value="#{item}" target="#{itemManagedBean.item}" />
				</h:commandLink>
			</rich:column>
			<f:facet name="footer">
			<rich:dataScroller for="itens" maxPages="5" />
		</f:facet>
		</rich:dataTable>
		<h:commandLink action="index" value="Voltar" />
	</h:form>
	<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
<rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
</h:body>

</html>